<template>
    <div class="navbar">
      <div class="navbartop">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" text-color="#333"
          @select="handleSelect">
          <div class="logo">
            <img src="@/assets/common/logo.png" alt="">
          </div>
          <!-- <div class="nav"> -->
          <el-menu-item index="1">
            <router-link to="/systemManage">系统管理</router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/information">信息录入</router-link>
          </el-menu-item>
          <el-menu-item index="3">
            <router-link to="/equipment1">设备管理</router-link>
          </el-menu-item>
          <el-menu-item index="4">首页配置</el-menu-item>
          <el-menu-item index="5">节能管理</el-menu-item>
          <el-menu-item index="6">能耗监测</el-menu-item>
          <el-menu-item index="7">智慧运维</el-menu-item>
          <el-menu-item index="8">计量收费</el-menu-item>
          <el-menu-item index="9">安全监测</el-menu-item>
        <!-- </div> -->
          <!-- 头像 -->
          <div class="right-menu">
            <el-dropdown class="avatar-container" trigger="click">
              <div class="avatar-wrapper">
                <img src="@/assets/common/login_by.png" class="user-avatar">
                <i class="el-icon-caret-bottom" />
              </div>
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item>主页</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item divided @click.native="logout">
                  <span style="display:block;">退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-menu>
      </div>
      <router-view/>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Home',
    data() {
      return {
        activeIndex: '1',
        navreveal: '1'
      }
    },
    methods: {
      handleClickOutside() {
        this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
      },
      // 点击的哪个标签
      handleSelect(key, keyPath) {
        this.navreveal = keyPath[0]
      },
  
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .navbar {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
    .sidebar_tabs{
      width: 100%;
      height: 100%;
      display: flex;
      .tabs{
        width: 100%;
        height: 100%;
      }
    }
  
    .navbartop {
      width: 100%;
      height: 70px;
      overflow: hidden;
  
      .logo {
        width: 220px;
        height: 70px;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  
    .el-menu-item.is-active {
      height: 40px;
      line-height: 40px;
      border: 0;
      border-radius: 20px;
      background-color: #3768FA;
      color: white;
      margin-top: 15px;
  
    }
    .el-menu-demo {
      height: 100%;
    }
  
    .el-menu-item {
      height: 70px;
      line-height: 70px;
      margin-left: 10px;
    }
  
    .hamburger-container {
      line-height: 70px;
      height: 100%;
      float: left;
      cursor: pointer;
      transition: background .3s;
      -webkit-tap-highlight-color: transparent;
  
      &:hover {
        background: rgba(0, 0, 0, .025)
      }
    }
  
    .breadcrumb-container {
      float: left;
    }
  
    .right-menu {
      float: right;
      height: 100%;
      line-height: 70px;
  
      &:focus {
        outline: none;
      }
  
      .right-menu-item {
        display: inline-block;
        padding: 0 8px;
        height: 100%;
        font-size: 18px;
        color: #5a5e66;
        vertical-align: text-bottom;
  
        &.hover-effect {
          cursor: pointer;
          transition: background .3s;
  
          &:hover {
            background: rgba(0, 0, 0, .025)
          }
        }
      }
  
      .avatar-container {
        margin-right: 30px;
  
        .avatar-wrapper {
          margin-top: 5px;
          position: relative;
          margin-right: 20px;
  
          .user-avatar {
            margin-top: 10px;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 20px;
          }
  
          .el-icon-caret-bottom {
            cursor: pointer;
            position: absolute;
            right: -20px;
            top: 25px;
            font-size: 12px;
          }
        }
      }
    }
  
    .sidebar {
      width: 220px;
      height: 100%;
    }
  }
  </style>
  